<template>
	<div class="layout-pd">
    <el-card shadow="hover" class="layout-padding-auto">
      <el-row>
        <div>
          分屏:
          <el-button-group>
            <el-button :type="state.chartNum==1?'primary':'info'" @click="changeZone(1)">1</el-button>
            <el-button :type="state.chartNum==2?'primary':'info'" @click="changeZone(2)">2</el-button>
            <el-button :type="state.chartNum==4?'primary':'info'" @click="changeZone(4)">4</el-button>
          </el-button-group>
        </div>
      </el-row>
      <div class="chart-container">
        <MyChart :style="getStyle" v-if="state.chartNum>=1"/>
        <MyChart :style="getStyle" v-if="state.chartNum>=2"/>
        <MyChart :style="getStyle" v-if="state.chartNum>=3"/>
        <MyChart :style="getStyle" v-if="state.chartNum>=4"/>
      </div>

    </el-card>

	</div>
</template>

<script setup lang="ts" name="loginIndex">
import {defineAsyncComponent, onMounted, reactive, computed, ref} from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import * as echarts from 'echarts';

// 引入组件
const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'));
const Mobile = defineAsyncComponent(() => import('/@/views/login/component/mobile.vue'));
const Scan = defineAsyncComponent(() => import('/@/views/login/component/scan.vue'));
const MyChart = defineAsyncComponent(() => import('/src/views/kline/component/MyChart.vue'));

// 定义变量内容

const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive({
  ws: null,
  chartNum: 1,
	tabsActiveName: 'account',
	isScan: false,
});

// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});
// 页面加载时
onMounted(() => {
	//NextLoading.done();

  state.ws = new WebSocket('ws://81.68.82.173:3006');

  state.ws.onopen = function open() {
    console.log('WebSocket connected');
  };

  state.ws.onmessage = function incoming(data) {
    console.log('received: %s', data);
  };

  state.ws.onerror = function error(err) {
    console.error('WebSocket error observed:', err);
  };

  state.ws.onclose = function close(event) {
    console.log('WebSocket closed');
  };
});

const changeZone = (num : number) => {
  state.chartNum = num;
}

const getStyle = computed(() => {
  if (state.chartNum == 1) {
    return "width:100%;height:100%";
  } else if (state.chartNum == 2) {
    return "float:left;width:50%;height:100%";
  } else if (state.chartNum == 4) {
    return "float:left;width:50%;height:50%";
  }
});


</script>

<style scoped lang="scss">
.chart-container {
  height: calc(100vh - 100px);
  width: 100%;
}
</style>
